Javascript SpamFlavor未定义用于无线电视盒

我正在努力通过淘汰赛，单选按钮有一些问题

HTML:

---

消息为：

消息：未定义spamFlavor

。我哪里出错了？

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

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

此处使用的是“with”绑定。因此，该div中的所有上下文都将具有与“with”相关属性的datacontext（在本例中为..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>

樱桃
杏仁
味精

下一个

或者更简单（假设您不是从某个地方异步加载“currentQuestion”数据）

樱桃
杏仁
味精

下一个

---

在我看来，在这种情况下，你真的不需要with语句，除非你计划稍后在其中添加更多内容。

嗨，杰森，有几件事。1） 如果在单独的js文件中声明了KO ViewModel，请确保将其包含在js引用中。2） 是您在分层html中提供的html。将KO绑定到层次结构中的某个对象时，您将不在viewModel的范围内。因此，您可能需要执行类似$parent.spamFlavor或$root.spamFlavor的操作，具体取决于html层次结构的设置。如果你认为它设置正确，你能把你的html粘贴在那里吗！我已经将代码扩展了一点以上。还是一样的问题。如果我从HTML和JS中删除spamFlavor（也使用绑定），它就可以正常工作。但是，当我试图绑定这些单选按钮时，我得到了上面的错误状态

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

<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>

<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>