Question

我正在学习javascript和ko，试着用我最喜欢的桌面角色的角色表。由于这是第3天，我甚至不确定我是否正确接近这个，但下面是我尝试制作技能表格。它不会产生任何错误，但也没有任何功能。

逃避是我试图产生对其他可观察物/计算可观察物的引用，但没有运气。 eval的$ data部分后来增加了对如何纠正问题的建议的解释。

<script type="text/html" id="skills-template">
    <div data-bind="template: { name: 'skills-template', foreach: skills }"></div>
    <div class="row">
        <div class="col-md-1" data-bind="text: skill"></div>
        <div class="col-md-1"><strong data-bind="text: eval('$data.' + skill + 'Total')"></strong></div>
        <div class="col-md-1"><input size="2" data-bind="textInput: eval('$data.' + skill + 'Ranks')" /></div>
        <div class="col-md-1"><strong data-bind="text: eval('$data.' + skillMod)"></strong></div>
        <div class="col-md-1"><input size="2" data-bind="textInput: eval('$data.' + skill + 'Mod')" /></div>
        <div class="col-md-1"><strong data-bind="text: untrained"></strong></div>
        <div class="col-md-1"><strong>&nbsp;</strong></div>
        <div class="col-md-1"><strong>&nbsp;</strong></div>
        <div class="col-md-4">&nbsp;</div> 
    </div>

</script>

供参考，这是我创建的技能obj。

self.skills = [
    { skill: 'Acrobatics', skillMod: 'dexMod', untrained: 'Yes', acPenalty: 'Yes' },
    { skill: 'Appraise', skillMod: 'Dex', untrained: 'Yes', acPenalty: 'No' },
    { skill: 'Bluff', skillMod: 'Dex', untrained: 'Yes', acPenalty: 'No' },
    { skill: 'Climb', skillMod: 'Dex', untrained: 'Yes', acPenalty: 'Yes' },
    { skill: 'Craft', skillMod: 'Dex', untrained: 'Yes', acPenalty: 'No' },
    { skill: 'Diplomacy', skillMod: 'Dex', untrained: 'Yes', acPenalty: 'No' }
]

这是我尝试的计算观察的一个例子。

self.AcrobaticsTotal = ko.computed(function() {
    return Number(self.AcrobaticsRanks()) + Number(self.dexMod()) + Number(self.AcrobaticsMod()) + Number(self.AcrobaticsTrained());
}, this);

如果我手动编码，我可以将其全部工作，但我认为我会巧妙地做到这一点并避免输入所有40种技能和所有相关的可观察量。谢谢你的任何建议。

编辑：我应该更清楚，我正在尝试使数据绑定等同于我声明的其他可观察对象。我希望eval（$ data。'+ skill +'Total'）成为acrobaticsTotal，并且可以对acrobaticsTotal observable采取行动。

Answer 1

而不是在数据绑定中使用eval（）...只需使用一个函数。传入您要调用的技能和后缀，然后将其作为计算器调用，如下所示：

self.totalFor = function(skill, postfix) {
    var func = skill + postfix;

    // This will call the computed for the interpolated arguments
    return self[func]();
}

以下是一个工作示例：http://jsfiddle.net/bryanray/ugfggo1r/4/

<强>更新

添加了一个文本框，可让您更改杂技＆＃39;值。然后，文本框将显示更新的值。希望有所帮助。

更新以修复缺少的observable的绑定错误。谢谢你指出来。

Knockoutjs - 带有动态变量的模板

1 个答案: