Knockoutjs 单页应用程序绑定问题

Posted 2023-03-27

【中文标题】Knockoutjs 单页应用程序绑定问题

【英文标题】：Knockoutjs Single Page Application binding issues

【发布时间】：2018-06-10 03:52:15

【问题描述】：

您好，我正在使用 Knockoutjs、Sammy.js 和 Rest Web API 开发一个 .Net 单页应用程序。我对这些库有点陌生，我遇到了一些核心设计问题，我希望能获得一些见解。

我遇到的主要问题是针对特定元素使用敲除 ko.applybinding。

this.get("#/Clas-s-room", function(context) 
    dataPack.build(PageLoc, context)
    appPres.reload();
    ko.applyBindings(new clas-s-roomVmCore.View(), document.getElementById('view-Clas-s-room'));

);

由于这是一个单页应用程序，我必须动态附加我的视图。 dataPack.build 抓住了我的视野并绑定到单页的上下文。该功能按预期工作正常，但是当涉及到ko.applyBindings 时，我发现出现以下问题..

任何页面刷新都会丢失我的视图模型，如果sammy.js 哈希没有命中，则数据丢失。这个问题主要发生在任何共享内容（例如导航项、布局项等）上，因为当我再次点击#/Clas-s-room 哈希时，这些数据有自己的视图模型，这些共享模型会丢失。

除了为我的视图模型使用下面的构造函数之外，他们还有其他选择吗？将其设置为变量，然后尝试调整或添加到该变量似乎并没有调整我的模型。

我实际上是在寻找一种随时更新/刷新我的模型的方法，以便我可以处理新的页面。

是否有人将这些库用于 SPA 遇到这些问题？你是如何构建你的视图和绑定的？

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

【参考方案1】：

我已经创建了自己的网站（不插入此处，如果需要，请查看个人资料）作为带有淘汰赛的 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>

【讨论】：

非常感谢您的意见，这让我更好地了解如何将其与 sammy.js 集成。最后一个问题，您是否使用任何引擎来获取外部来源的模板？

@BrandonCemprola 不，我们的模板很简单并且加载到页面中，不需要我们的模板是动态的。