Knockoutjs单页应用程序绑定问题

Posted 2021-05-05

您好，我正在使用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时，我发现以下问题发生..

1. 任何页面刷新都会丢失我的视图模型，如果未点击sammy.js哈希，则数据将丢失。此问题主要发生在任何共享内容（例如导航项，布局项等）上。因为当我再次点击#/Classroom哈希时，这些数据有自己的视图模型，这些共享模型会丢失。
2. 除了在我的视图模型中使用下面的构造函数之外，它们是另一种选择吗？将其设置为变量，然后尝试调整或添加到该变量似乎不会调整我的模型。

我基本上是在寻找一种方法来随时更新/刷新我的模型，这样我就能处理一个新鲜的页面。

有没有人使用这些库来解决这些问题？你是如何构建你的观点和绑定的？

非常感谢任何帮助或想法。

答案

我创建了自己的网站（不插在这里，如果你愿意，请查看个人资料）作为带淘汰赛的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>

以上是关于Knockoutjs单页应用程序绑定问题的主要内容，如果未能解决你的问题，请参考以下文章

修复 JQM ajax 单页导航上的淘汰多个绑定

knockoutjs 引发无法解析绑定属性

KnockoutJs - 为啥初始化绑定处理程序只被调用一次？

KnockoutJS：设置 optionValue 打破“与”绑定

KnockoutJS 绑定

Knockoutjs 选项与 JSON 数据绑定？