0

アプリケーションに次の 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 は何もバインドしようとしていないというエラーはないと思います。

4

2 に答える 2

1

テンプレートをバインドするときにテンプレートという単語を使用することになっていませんか?

var bindingString = 'template: { name: "dashboard-template" }';
于 2013-03-07T15:51:12.250 に答える
0

データバインドで「テンプレート」パラメーターを指定する必要があります。また、関数の順序が少しおかしいと思います。これがあなたが探しているものだと思います：

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]);
});
于 2013-03-07T16:22:35.593 に答える