dotVVM 将值从数据绑定的 DOM 元素传递到 javascript 变量以进行可视化

Question

我正在创建一个用于数据可视化的 dotVVM webApp，但遇到了一个小问题：

由于我的视图 (html) 和我的 viewModel(c#) 之间的数据绑定，我只能得到那些 DOM 元素返回的删除注释字符串。（dotVVM 使用 Knockout.js 进行数据绑定）

var currency 获得以下值："<"!-- ko text: Currency --">"<"!-- /ko --">" 并显示在我的输入字段中，id 为 " 1".

我需要将正确的值（在本例中为 40 或初始值 400）输入 javascript-var 以进行可视化。

        var currency = document.getElementById("textBox").innerHTML;
        document.getElementById("1").value= currency;

 <div ID="container" style="width:100%; height:400px;"></div>

    <p ID="textBox">{{value: Currency}}</p>
    <input ID="1" value="" style="width: 900px" /

这是我的 ViewModel（为了演示目的尽可能简单）

    /// <summary>
    /// Gets or sets the active page. This is used in the top menu bar to 
    highlight the current menu item.
    /// </summary>
    public virtual string ActivePage => Context.Route.RouteName;

    public int Currency { get; set; } = 400;

    public void currency()
    {                    
            Currency = 40;
    }

Answer 1

首先，您可以使用 <dot:TextBox Text="{value: Currency}" /> 将 <input type="text"> 绑定到 Currency 属性.

如果您不能使用它并且不想编写自己的控件，则可以像在 knockout.js 中那样访问数据上下文 - <input type="text" data-bind="value: Currency" /> 与 TextBox 并且您可以使用 ko.dataFor(element) 访问元素的视图模型或 ko.contextFor(element) 使用 $parent, $index, ....

访问淘汰上下文

这是您在 Javascript 中获得货币的方法： var currency = knockout.dataFor(document.getElementById("textBox")).Currency();

dotVVM 将值从数据绑定的 DOM 元素传递到 javascript 变量以进行可视化

dotVVM passing values from databinded DOM-elements to javascript vars for visualisation

javascript

c#

knockout.js

data-binding

dotvvm