knockout.js - 淘汰赛js动态绑定

Question

我的应用程序中有以下 javascript 定义的页面，我正在尝试在其中使用敲除。

var dashboard = new DashboardPage();

function DashboardPage() {
    var page = this;

    page.open = function () {
        var bindingString = '{ name: "dashboard-template" }';
        $('#main div').html("").attr("data-bind", bindingString);
        ko.applyBindings(new page.ViewModel(), $("#main")[0]);
    };

    page.ViewModel = function () {
        var self = this;
        self.content = ko.observable("SOME WORDS");
    };
    //Other code removed.

这是模板：

<script type="text/html" id="dashboard-template">
    <div id="wrapper-block2" class="wrapper-block">
        <div id="content-block2" class="content-block">
            Hello
        </div>
    </div>
    <div id="wrapper-block3" class="wrapper-block">
        <div id="content-block3" class="content-block">
            World
        </div>
    </div>
</script>

dashboard.open() 肯定会被调用，但我的#main div 没有被填充，也没有错误。

有人可以指出我做错了什么吗？我假设没有错误，ko 甚至没有尝试绑定任何东西。

Answer 1

绑定模板时不应该使用模板这个词吗？

var bindingString = 'template: { name: "dashboard-template" }';

Answer 2

您需要在数据绑定中指定“模板”参数，而且我还认为您的函数的顺序可能有点混乱。我想这就是你要找的：

HTML：

<div id="main" data-bind="template: { name: 'dashboard-template' }"></div>

<script type="text/html" id="dashboard-template">
    <div id="wrapper-block2" class="wrapper-block">
        <div id="content-block2" class="content-block" data-bind="text: content">
        </div>
    </div>
</script>

JS：

function DashboardViewModel() {
    var self = this;

    self.content = ko.observable("SOME WORDS");
};


$(document).ready(function () {
    ko.applyBindings(new DashboardViewModel(), $("#main")[0]);
});