javascript - 如何在 JavaScript 中访问 NancyModule 属性？

Question

在 HTML 中，我可以借助 super 简单引擎 View (SSVE) 访问 NancyModule 属性，如下所示:

<label id="123"> @Model.PropertyName </Label> 

在运行时 @Model.PropertyName 将被替换为实际值，效果很好。 (More Information about this here)

我正在寻找一种在 JavaScript 中访问这些属性的干净方法，但我没有找到任何解决方案。

目前，我在标签(或其他任何东西)中加载这些属性，隐藏所述标签并通过这些标签访问 JavaScript 中的属性，这是一个可怕但有效的解决方案。

有人知道干净整洁的解决方案吗？预先感谢您。

Answer 1

您的一个选择是采用客户端 javascript MVVM 框架。有很多框架可供选择，例如 KnockoutJs .

使用这种方法，您将能够干净地编排您的客户端应用程序，而无需进行困惑的事件和 DOM 操作。

这是一个摘自 KnockoutJs 文档的基本示例，它展示了编辑文本框如何自动更新 View 模型(同样还有许多其他选项)。

// Here's my data model.  You can setup using your Nancy model here.
var ViewModel = function(first, last) {
  this.firstName = ko.observable(first);
  this.lastName = ko.observable(last);

  this.fullName = ko.computed(function() {
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
    return this.firstName() + " " + this.lastName();
  }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

body {
  font-family: arial;
  font-size: 14px;
}
.liveExample {
  padding: 1em;
  background-color: #EEEEDD;
  border: 1px solid #CCC;
  max-width: 655px;
}
.liveExample input {
  font-family: Arial;
}
.liveExample b {
  font-weight: bold;
}
.liveExample p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}
.liveExample select[multiple] {
  width: 100%;
  height: 8em;
}
.liveExample h2 {
  margin-top: 0.4em;
  font-weight: bold;
  font-size: 1.2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='liveExample'>
  <p>First name:
    <input data-bind='value: firstName' />
  </p>
  <p>Last name:
    <input data-bind='value: lastName' />
  </p>
  <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div>