Knockoutjs-带有动态变量的模板

Knockoutjs - Template with dynamic variables

本文关键字：变量 动态 Knockoutjs-      更新时间：2023-09-26

我正在学习javascript和ko，这是通过尝试我最喜欢的桌面rpg的字符表来实现的。由于这是第三天，我甚至不确定我是否正确地处理了这个问题，但下面是我制作技能表格的尝试。它不会产生错误，但也没有任何功能。

evals是我试图产生对其他可观测值/计算可观测值的引用，但没有运气。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>

作为参考，这是我创建的技能对象。

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种技能和所有相关的可观测值。谢谢你的建议。

edit：我本应该更清楚一点，我正试图使数据绑定与我声明的其他可观测值等效。我希望eval（$data.'+skill+'Total'）是acrobicsTotal，并对acrobicsTotal进行ko操作。

与其在数据绑定中使用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/

更新

添加了一个文本框，允许您更改"杂技"值。然后，文本框将显示更新后的值。希望能有所帮助。

已更新以修复丢失可观测值的绑定错误。谢谢你指出。

相关文章：