Question

我想将第三方控件挂钩到knockoutjs并使用自定义绑定将它们连接在一起。到目前为止它工作正常。但是我想要选择模板的控件很少渲染控件。但是找不到任何通过javascript调用knockout 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将这两者结合在一起。如果你认为这个例子还不够，请告诉我。

谢谢， Daljit Singh

Answer 1

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

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上的this article。

Answer 2

问题提出可能需要一段时间。我只需要解决这个问题，让Handlebarsjs工作得很好。

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

我跟着Typeaheadjs's Custom Template example向下滚动了一下。这在Knockoutjs中运行良好。

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

$('.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的副臂的切割。

knockoutjs，自定义绑定和knockoutjs模板（从自定义绑定init方法调用knockoutjs模板）

2 个答案: