2

カスタムテンプレートバインディングでknockoutjsを使用する際に問題が発生しました。

次のようなHTML本文があるとします。

<div id="1">
    <div data-bind="template:{name: '2', data: data}"></div>
</div>

<div id="2">
    <h3 data-bind="text: caption"></h3>
</div>

JSコードは次のようになります。

var ViewModel2 = function () {
    this.caption = ko.observable("Caption");
}

var ViewModel1 = function () {
    this.data = new ViewModel2();
}

ko.applyBindings(new ViewModel1(), document.getElementById("1"));

このコードをテストすると、すべてが正常に機能します。
JSFiddleの例を参照してください：http：//jsfiddle.net/4eTWW/33/

ここで、カスタムテンプレートバインディングを作成するとします。'template'の代わりに'templatex'バインディングを使用します。

HTMLでは、1行だけ変更する必要があります。

<div data-bind="templatex:{name: '2', data: data}"></div>

次に、カスタムテンプレートバインディングをJSに追加しましょう。

/*Custom binding*/
ko.bindingHandlers.templatex = {
   init: function (element) {
       ko.bindingHandlers.template.init.apply(this, arguments);
   },

   update: ko.bindingHandlers.template.update
}

参照： http： //jsfiddle.net/4eTWW/35/

ただし、この場合、モデルに「キャプション」が見つからないというエラーが発生します。

次に、テンプレート{}をhtmlバインディングに追加しましょう。

<div data-bind="template: {}, templatex:{name: '2', data: data}"></div>

参照： http： //jsfiddle.net/4eTWW/36/

そして今、すべてがうまく機能します。

親divをバインドしている間、子divがテンプレートであると判断できないようです。

では、カスタムテンプレートバインダーでテンプレートとしてマークするにはどうすればよいですか？

ありがとう。

4

2 に答える 2

1

更新ハンドラーが間違っています。次のように変更してください。

ko.bindingHandlers.templatex= {
    init: function(element) {
        // do things
        return ko.bindingHandlers.template.init.apply(this, arguments);
    },

    update: function(element) {
        return ko.bindingHandlers.template.update.apply(this, arguments);
    }
}

ここに作業中のフィドルがあります：http：//jsfiddle.net/vyshniakov/4eTWW/39/

于 2012-10-31T09:23:39.887 に答える
0

カスタムバインディングを使用して新しいテンプレートエンジンを作成することはできないと思います。カスタムエンジンをに登録する必要がありますko.setTemplateEngine()。

knockoutjsソースから：

If you want to make a custom template engine,

[1] Inherit from the ko.templateEngine class (like ko.nativeTemplateEngine does)
[2] Override 'renderTemplateSource', supplying a function with this signature:

       function (templateSource, bindingContext, options) {
           // - templateSource.text() is the text of the template you should render
           // - bindingContext.$data is the data you should pass into the template
           //   - you might also want to make bindingContext.$parent, bindingContext.$parents,
           //     and bindingContext.$root available in the template too
           // - options gives you access to any other properties set on "data-bind: { template: options }"
           //
           // Return value: an array of DOM nodes
       }

[3] Override 'createJavaScriptEvaluatorBlock', supplying a function with this signature:

       function (script) {
           // Return value: Whatever syntax means "Evaluate the JavaScript statement 'script' and output the result"
           //               For example, the jquery.tmpl template engine converts 'someScript' to '${ someScript }'
       }

    This is only necessary if you want to allow data-bind attributes to reference arbitrary template variables.
    If you don't want to allow that, you can set the property 'allowTemplateRewriting' to false (like ko.nativeTemplateEngine does)
    and then you don't need to override 'createJavaScriptEvaluatorBlock'.

例： http： //jsfiddle.net/6pStz/ （このページの注7を参照）

于 2012-10-31T09:21:35.927 に答える