我一直在疯狂试图解决这一问题。我已经看到了很多混淆和难以实现的示例,这些示例在异步调用完成后在Knockout中填充可计算的可观察对象,但是我似乎无法使用模块公开模式使其工作。
我正在尝试创建一个只读的observable,因为这就是我所需要的。如果我不需要运行匿名函数来发出请求,我什至无法观察。这是我的视图模型:
eh.vm.skills = function () {
//#region Public Variables
var skills = ko.computed({
read: function () {
$.get("http://horodyski.me/api/skills", function (data) {
return data;
});
},
deferEvaluation: true
}),
//#endregion
//#region Public Interface
return {
skills: skills
}
//#endregion
};
这是HTML绑定:
<ul class="skills skills-top" id="skills" data-bind="foreach: skills">
<li>
<i data-bind="text: $index"> </i>
<span data-bind="text: $data.Title"></span>
</li>
</ul>
<script src="//cdn.horodyski.me/js/vm.js"></script>
<script>
ko.applyBindings(eh.vm.skills, $("#skills")[0]);
</script>
我想做的是创建skills
变量,获取数据并返回它。数据已经返回到数组中(例如:),[{Title: "ABC"}]
但似乎没有绑定。我尝试使用$.when().then()
替代方法(根据自己的喜好),但是即使延迟了计算值,它仍然不会更新。
对我来说,真正复杂的部分是可变范围。涉及范围时,模块显示模式很烂。我已经为此花了3个小时动脑筋...如果有人可以引导我朝正确的方向前进,将不胜感激。
使用淘汰赛3.1进行编辑(如果有帮助)
您的read
回叫全错了。
回调:
function (data) {
return data;
}
是无效代码,它将数据返回给调用此回调的jQuery函数,该函数将不执行任何操作。
您需要返回延期本身:
read: function () {
return $.get("http://horodyski.me/api/skills");
}
您还需要在此处使用异步扩展程序:http : //smellegantcode.wordpress.com/2012/12/10/asynchronous-computed-observables-in-knockout-js/
ko.extenders.async = function(computedDeferred, initialValue) {
var plainObservable = ko.observable(initialValue), currentDeferred;
plainObservable.inProgress = ko.observable(false);
ko.computed(function() {
if (currentDeferred) {
currentDeferred.reject();
currentDeferred = null;
}
var newDeferred = computedDeferred();
if (newDeferred && (typeof newDeferred.done == "function")) {
plainObservable.inProgress(true);
currentDeferred = $.Deferred().done(function(data) {
plainObservable.inProgress(false);
plainObservable(data);
});
newDeferred.done(currentDeferred.resolve);
} else {
plainObservable(newDeferred);
}
});
return plainObservable;
};
像这样使用:
var skills = ko.computed(...).extend({ async: null });
如果您想在传递给视图之前先钩住JSON:
var skillsJson = ko.computed(...).extend({ async: null });
var skills = ko.computed(function () {
return transformData(skillsJson());
};
或者:
var skills = ko.computed(function () {
return $.get("url").then(function (data) {
return transform(data);
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句