您好,我正在使用Knockoutjs,Sammy.js和Rest Web API处理.Net
单页面应用程序。我对这些图书馆有些陌生,我遇到了一些核心设计问题,我希望能够获得一些见解。
我遇到的主要问题是使用针对特定元素的敲击ko.applybinding。
this.get("#/Classroom", function(context) {
dataPack.build(PageLoc, context)
appPres.reload();
ko.applyBindings(new classroomVmCore.View(), document.getElementById('view-Classroom'));
});
由于这是一个单页面应用程序,我必须动态附加我的视图。 dataPack.build
是抓取我的视图并绑定到单个页面的上下文的东西。该功能可以正常工作,但是当涉及ko.applyBindings
时,我发现以下问题发生..
任何页面刷新都会丢失我的视图模型,如果没有sammy.js
哈希,则数据丢失。此问题主要发生在任何共享内容(例如导航项,布局项等)上。由于此数据在我再次点击#/Classroom
哈希时有自己的视图模型,这些共享模型将丢失。
除了在我的视图模型中使用下面的构造函数之外,它们是另一个选项吗?将其设置为变量,然后尝试调整或添加到该变量似乎不会调整我的模型。
我基本上都在寻找一种方法来随时更新/刷新我的模型,这样我就能处理新的页面。
是否有人使用这些库来解决这些问题?你是如何构建你的观点和绑定的?
非常感谢任何帮助或想法。
答案 0 :(得分:0)
我创建了自己的网站(不插入此处,如果您愿意,请参阅个人资料)作为带淘汰赛的SPA。我实际上使用模板来实现我的目标。这是我如何做的一个简短例子。
抱歉,我从未使用过sammy.js对此有任何想法。
function MainVM() {
var self = this;
self.ContactVM = ko.observable(new AboutMeVM('John', 'code'))
self.Content = ko.observable({
name: 'HomeTemplate'
});
self.ShowHome = function() {
// Page using MainVM
self.Content({
name: 'HomeTemplate'
});
}
self.ShowContact = function() {
// Page with on demand VM
self.Content({
name: 'ContactTemplate',
data: new ContactVM('me', "555-5555")
})
}
self.ShowContactSteve = function() {
// Page with on demand VM
self.Content({
name: 'ContactTemplate',
data: new ContactVM('Steve', "555-1234")
})
}
self.ShowAboutMe = function() {
// Page with a static VM
self.Content({
name: 'AboutMeTemplate',
data: self.ContactVM
});
}
}
function ContactVM(name, number) {
var self = this;
self.Name = ko.observable(name);
self.Phone = ko.observable(number);
}
function AboutMeVM(name, job) {
var self = this;
self.Name = ko.observable(name);
self.Job = ko.observable(job);
}
ko.applyBindings(new MainVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script type="text/html" id="AboutMeTemplate">
About me:<br> i am <span data-bind="text: Name"></span> and I <span data-bind="text: Job"></span>
</script>
<script type="text/html" id="ContactTemplate">
Contact <span data-bind="text: Name"></span>: <span data-bind="text: Phone"></span>
</script>
<script type="text/html" id="HomeTemplate">
Welcome to my website
</script>
<div>
<h3>Links</h3>
<a data-bind="click: ShowHome">Home</a> <br>
<a data-bind="click: ShowContact">Contact Me</a><br>
<a data-bind="click: ShowContactSteve">Contact Steve</a><br>
<a data-bind="click: ShowAboutMe">About Me</a><br>
<hr>
<h3> Page content</h3>
<div data-bind="template: Content"></div>
</div>