Question

我通过Knockout工作，并且单选按钮出现问题。

HTML：

<div data-bind="with: currentQuestion">
    <p data-bind="text: question"></p>
    <p>
        <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
        <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
        <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
    </p>
    <button data-bind="click: $root.nextQuestion">Next</button>
</div>

使用Javascript：

    function ViewModel() {
        var self = this;
        self.currentQuestion = ko.observable();
        self.spamFlavor = ko.observable();
    };
    ko.applyBindings(new ViewModel());

消息是：Message: spamFlavor is not defined。我哪里出错了？

Answer 1

您的代码是正确的并且正在运行。可能是浏览器正在缓存旧版本的javascript？

function ViewModel() {
    var self = this;
    self.spamFlavor = ko.observable();
};
ko.applyBindings(new ViewModel());

http://jsfiddle.net/yrj5okz1/1/

Answer 2

您正在使用＆＃34;使用＆＃34;绑定在这里。因此，该div中的所有上下文都将具有该＆＃34;的数据文本;使用＆＃34;相关属性（在本例中为.currentQuestion）。因此，请使用此方法，因为spamFlavor是ViewModel上的属性，而不是currentQuestion对象。

<div data-bind="with: currentQuestion">
    <p data-bind="text: question"></p>
    <p>
        <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: $root.spamFlavor" /> Cherry</div>
        <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: $root.spamFlavor" /> Almond</div>
        <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: $root.spamFlavor" /> Monosodium Glutamate</div>
    </p>
    <button data-bind="click: $root.nextQuestion">Next</button>
</div>

甚至更容易（假设您没有异步加载＆＃34; currentQuestion＆＃34;来自某处的数据）

<div>
    <p data-bind="text: currentQuestion.question"></p>
    <p>
        <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
        <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
        <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
    </p>
    <button data-bind="click: nextQuestion">Next</button>
</div>

在我看来，你并不真的需要在这种情况下使用with声明，除非你打算稍后会有更多的东西。

SpamFlavor未定义为无线电盒

2 个答案: