所以，我花了一些时间来学习 Knockout，到目前为止我玩得很开心。我一直在寻找一个使用 Knockout 的好用例，我想我已经在吉他调音器单页应用程序中找到了一个。
这是我现在的位置:
- 我目前有一个吉他对象，可以处理添加另一个“音符”(任意设置为“f”)。
- 向吉他对象传递琴弦数量和音符数组。
- 在用户界面中我可以看到所有字符串/注释
这是我的 HTML 和底层 js 模型
<!-- Scripts -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/knockout-3.1.0.min.js"></script>
<script src="js/driver.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Pull the string data from the guitar object and populate it here. -->
<ul data-bind="foreach: guitars" class="guitars">
<span>This is a <span data-bind="text: notes().length"></span> stringed guitar</span>
<button data-bind="click: addNote">Addnote</button>
<li>
<ul data-bind="foreach: notes" class="audio-triggers">
<li><a data-bind="text: $data" href="#"></a></li>
</ul>
</li>
</ul>
...
</body>
JS: $(文档).ready(函数(){
// Guitar Class that has its own note adder.
var Guitar = function(strings, notes) {
this.strings = strings;
this.notes = ko.observableArray(notes);
this.audioPaths = retrieveAudio(notes);
this.addNote = function() {
this.notes.push("f");
this.strings = this.strings++;
}.bind(this);
}
// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
guitars: [
new Guitar(3, ["e", "a", "d"]),
new Guitar(6, ["e", "a", "d", "a", "d", "g"])
]
};
ko.applyBindings(viewModel);
});
// Functions
function retrieveAudio(notes) {
var paths = {}
// For each note, access the audio path
$.each(notes, function(index, val){
paths.note = val;
paths.note.path = 'audio/1.mp3'
});
return paths;
}
本质上，我希望能够获取笔记数组，并使用笔记名称作为文件名来确定音频路径，但我有点卡住了，因为我不确定是否可以有一种“knockout ”方法可以做到这一点。
我的思考过程是编写一个外部函数，该函数将填充一个对象以根据传入的注释返回音频路径，但同样，我仍然不确定如何在相应的 HTML 中访问它。因为到目前为止，它只是在非对象的元素上使用数据绑定(bind)。
我想我的问题是:
- 让吉他“对象”了解其音频的所有路径是否有意义？
- 我可以通过对象字面量
data-bind: foreach吗？ - 我在这里所做的事情在任何方面都类似于最佳实践吗？
- 我需要将audioPaths放入ko.observableArray中吗？
我假设我将以与访问注释数组本身类似的方式使用 foreach 数据绑定(bind)来访问注释路径。我想我的最后一个问题是，我如何访问对象文字中的嵌套属性(假设我可以通过它来 data-bind: foreach ？)。
我很感激任何提示/提示/帮助! :)
最佳答案
我会考虑将数组中的注释转换为具有自己的路径属性的单个对象。如果可以计算文件的路径，那么您可以使用 ko.compulated 根据实体注释值计算路径。
所以你最终会得到类似的东西
// Guitar Class that has its own note adder.
var Guitar = function (strings, notes) {
var self = this;
self.strings = strings;
self.notes = ko.observableArray($.map(notes, function (item, index) {
return new Note(item);
}));
self.addNote = function () {
self.notes.push(new Note());
self.strings = this.strings++;
}.bind(self);
};
var Note = function (noteName) {
var self = this;
self.noteName = ko.observable(noteName || 'f');
self.audioPath = ko.computed(function () {
return 'audio/' + self.noteName() + '.mp3';
});
};
// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
guitars: [
new Guitar(3, ["e", "a", "d"]),
new Guitar(6, ["e", "a", "d", "a", "d", "g"])]
};
ko.applyBindings(viewModel);
<强> jsFiddle Demo
关于javascript - Knockout.js - 数组/对象文字和访问音频路径的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25108696/