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

当你binding a template时，你不应该使用单词模板吗？

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

Answer 2

您需要在数据绑定中指定“template”参数，我还认为您的函数的顺序可能有点棘手。我想这就是你要找的东西：

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]);
});

Knockout js动态绑定

2 个答案: