knockout.js - 菜鸟首发淘汰赛题

Question

我刚开始阅读，并通过了一些 knokout 教程，并且非常喜欢它，但是我无法自己制作一个简单的示例。这是HTML代码

<input id="Button2" type="button" value="+" data-bind="click:increment" />
<input id="Text1" type="text" data-bind="text:foo" />

和js代码：

<script type="text/javascript">
    function AppViewModel() {
        this.foo = ko.observable('0');
        this.increment = function () {
            alert(foo);
            foo += 1;
        };
    }
    ko.applyBindings(new AppViewModel());


</script>

基本上我希望jsut通过单击一个按钮来增加一个文本框的值。我也在头文件中包含了以下 js 文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.1.0.debug.js" type="text/javascript">

我还缺少什么？任何帮助将不胜感激

Answer 1

您正在对输入使用文本绑定。设置输入的文本不会做任何明显的事情。

您需要改用值绑定。像这样。

<input id="Button2" type="button" value="+" data-bind="click:increment" />
<input id="Text1" type="text" data-bind="value:foo" />

您还需要通过调用 observable 函数来分配 foo 元素。

function AppViewModel() {
    var self = this;
    this.foo = ko.observable(0);
    this.increment = function () {
        self.foo(self.foo() + 1);
    };
}

http://jsfiddle.net/madcapnmckay/wdVYe/

希望这可以帮助。