2

我想将第三方控件挂钩到 knockoutjs 并使用自定义绑定将它们连接在一起。到目前为止，它工作正常。但是很少有控件我想选择模板来呈现控件。但是找不到任何方法通过 javascript 调用淘汰赛 js 模板。

有没有可能。

<div data-bind = "knockoutjs-text : data, label : labelText"></div>

// got following template in seperate file
<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

// my custom binding handler in seperate file
ko.bindingHandlers.knockoutjs-text = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    // now it want to call person-template from here and attached it to element


}

};

这是我的案例的简单示例，我的案例是创建用户控件，b 将这两者结合在一起。如果你觉得这个例子还不够，请告诉我。

谢谢，达尔吉特·辛格

4

2 回答 2

0

是的，您可以使用动态模板：

HTML：

<script type="text/html" id="LoadingTemplate">Loading...</script>

下载模板后更新脚本标签：

self.Content = ko.observable("<b>Hello World</b>");
self.TemplateID = ko.observable("LoadingTemplate");
self.UniquePageID = ko.observable(GenerateUUID());  // create a random id

ko.computed(function () {
    var html = self.Content(),
        uniqueID = ko.utils.unwrapObservable(self.UniquePageID),
        templateID = "template_" + uniqueID;

    // remove the current template
    $("#" + templateID).remove();

    // append the html template
    $("body").append('<script type="text/html" id="' + templateID + '">' + html + '</script>');

    // update the template ID (this will trigger the knockoutjs data-bindings)
    self.TemplateID(templateID);

}).extend({ throttle: 100 });

有关更多信息，请参阅knockmeout.net 上的这篇文章。

于 2012-09-03T10:05:37.757 回答
0

自问题提出以来可能已经有一段时间了。我刚刚解决了这个问题，并且让 Handlebarsjs 工作得很好。

我必须为新的 Typeahead.js 编写一个自定义绑定，然后我被要求在下拉列表中显示更多数据。

我按照Typeaheadjs 的自定义模板示例向下滚动了一下。这在 Knockoutjs 中运行良好。

这是有问题的代码，它不是专门用于 knockoutjs，但我将它用于我的模板：suggestion 条目成功。

$('.example-twitter-oss .typeahead').typeahead(null, {
  name: 'twitter-oss',
  displayKey: 'name',
  source: repos.ttAdapter(),
  templates: {
    suggestion: Handlebars.compile([
      '<p class="repo-language">{{language}}</p>',
      '<p class="repo-name">{{name}}</p>',
      '<p class="repo-description">{{description}}</p>'
    ].join(''))
  }
});

请注意，Handlebars 的拼写不是大写的“B”，由于它使用编译功能，因此您必须使用更大的 Handlebars.js 库（当前为“handlebars-v1.3.0.js”），而不是运行时库。

我对需要一个 88kb 的库来执行此操作有疑虑，但我确实喜欢 Handlebars 吊臂的剪裁。

于 2014-03-04T13:44:20.190 回答