第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

是否有使用 jsViews/jsRender 和 Web 組件作為模板引擎的用例？

是否有使用 jsViews/jsRender 和 Web 組件作為模板引擎的用例？

慕姐4208626 2023-07-20 15:37:17
我正在編寫一些 Web 組件，我想使用 jsViews $.link 功能作為我的模板引擎。我已經(jīng)能夠使用 $.render 來替換 ShadowRoot 克隆內(nèi)容的 .innerHTML，但我只能通過以下方式使用 $.link 。只是看起來“骯臟”，必須添加一個(gè)額外的 div 來鏈接。有一個(gè)更好的方法嗎？這里有任何性能問題嗎？：const template = document.createElement('template');template.innerHTML = `<div id="todo-item-tmpl"></div>`;class TodoItem extends HTMLElement {    constructor() {        this._tmpl = $.templates('#todoItems');        this._shadowRoot = this.attachShadow({ 'mode': 'open' });        this._shadowRoot.appendChild(template.content.cloneNode(true));        this._todoTmpl = this._shadowRoot.querySelector('#todo-item-tmpl');        this._tmpl.link(this._todoTmpl, this._myDataObj);    }}
查看完整描述

1 回答

?
慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

這是可能的方法，如示例的修改版本所示：https://jsfiddle.net/BorisMoore/z9wnyh5q/。

它們不是將模板定義為腳本元素的內(nèi)容，而是使用標(biāo)記字符串來定義 - 以保留 Web 組件本身的 HTML 標(biāo)記。

<html>

  <head>...</head>

  <body>

    <to-do-app></to-do-app>

  </body>

</html>

項(xiàng)目模板可以是全局定義的命名模板，


$.templates("todoItemTmpl", todoItemTmpl}  // markup string for item template

或者可以將主模板作為資源（https://www.jsviews.com/#d.templates@tmpl-resources），以實(shí)現(xiàn)更好的封裝：


this._tmpl = $.templates({

  markup: todoappTmpl, // markup string

  templates: {todoItemTmpl: todoItemTmpl}  // markup string for item template

});

this._tmpl.link(this._wrapper, this._todos, this);對(duì)( https://www.jsviews.com/#jsvtmpllink )的調(diào)用需要將 HTML 元素（或 jQuery 選擇器）作為第一個(gè)參數(shù)，該元素是包裝呈現(xiàn)的數(shù)據(jù)鏈接內(nèi)容的容器元素。它不能直接是文檔片段（影子根），因此您需要提供包裝元素（并且還可以選擇插入樣式元素），例如通過以下代碼：


// Create a wrapper element

this._wrapper = document.createElement('span');


// and a style element...

this._style = document.createElement('style');

this._style.textContent = todoappStyle; // Stylesheet markup


// Both inserted under the shadow root

this._shadowRoot = this.attachShadow({ mode: "open" });

this._shadowRoot.append(this._style, this._wrapper);


// Render and data-link

this._tmpl.link(this._wrapper, this._todos, this);


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)