如何在 JavaScript 中访问 NancyModule 属性？答案

【问题标题】：How to access NancyModule Properties in JavaScript?如何在 JavaScript 中访问 NancyModule 属性？
【发布时间】：2016-07-19 20:33:32
【问题描述】：

在 HTML 中，我可以在超级简单引擎视图 (SSVE) 的帮助下访问 NancyModule 属性，如下所示：

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

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

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

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

有人知道干净整洁的解决方案吗？提前谢谢你。

【问题讨论】：

唯一的方法是将它们存储在隐藏字段等中（就像你自己建议的那样）或动态生成一个 javascript 块并设置 javascript 变量

标签： javascript html nancy

【解决方案1】：

您可以选择采用客户端 javascript MVVM 框架。有很多框架可供选择，例如 KnockoutJs。

使用这种方法，您将能够干净利落地编排您的客户端应用程序，而不会出现混乱的事件和 DOM 操作。

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

// 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>

【讨论】：

【解决方案2】：

你可以这样写：

<script type="text/javascript">    
    var 123 = @Model.PropertyName;
</script>

您的 IDE 可能会将其标记为错误，但它确实有效。

【讨论】：