Question

在HTML中，我可以借助Super Simple Engine View（SSVE）访问NancyModule属性，如下所示：

$ brew tap homebrew/bundle

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

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

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

有谁知道一个干净整洁的解决方案？提前谢谢。

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

Answer 2

你可以这样写：

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

可能你的IDE会将此标记为错误，但它可以正常工作。

如何在JavaScript中访问NancyModule属性？

2 个答案: