Question

我目前正在使用ASP.NET进行开发，我想开始使用Knockout JS ...基本上我所做的就是复制粘贴第一个教程中提供的代码。

所以我把它放到head：

中

<script type="text/javascript">
    function() {
        // This is a simple *viewmodel* - JavaScript that defines the data and
        behavior of your UI

        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            this.fullName = ko.computed(function() {
            return this.firstName() + " " + this.lastName();    
        }, this);

        this.capitalizeLastName = function() {
            var currentVal = this.lastName();        // Read the current value
            this.lastName(currentVal.toUpperCase()); // Write back a modified value
        };
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
    }();
</script>

......以及

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>

在body我放置

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>
    First name: <strong data-bind="text: firstName"></strong>
</p>
<p>
    Last name: <strong data-bind="text: lastName"></strong>
</p>
<p>
    First name:
    <input data-bind="value: firstName" /></p>
<p>
    Last name:
    <input data-bind="value: lastName" /></p>
<p>
    Full name: <strong data-bind="text: fullName"></strong>
</p>
<button data-bind="click: capitalizeLastName">
    Go caps</button>

代码全部来自Knockout JS的教程，但不知何故，这些值不会自动绑定 - 换句话说它对我不起作用。我在这里错过了什么吗？

Answer 1

在我看来，在呈现DOM（您的HTML）之前，您正在执行JavaScript代码。您包含在头部的JavaScript函数会立即执行。您需要确保仅在页面完全呈现时执行此代码。

您可以使用jQuery ready功能执行此操作。

<script type="text/javascript">
  $(document).ready(function () {
    // your existing JavaScript goes here.
  })
</script>

Answer 2

在我看来，你错误地使用了匿名函数包装器。

您需要在代码中添加更多（）。

(function() { 
 ...
})();

工作示例：http://jsfiddle.net/AlfeG/bZatD/

Answer 3

如果你不想使用jQuery，你还可以：

删除您的外部自执行功能
将脚本引用在身体底部的淘汰视图模型

开始使用Knockout JS

3 个答案: