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

Question

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

由于我的 view(html) 和 viewModel(c#) 之间的数据绑定(bind)，我只能通过这些 DOM 元素获得 knockout 注释字符串。 (dotVVM 使用 Knockout.js 进行数据绑定(bind))

var 货币获得以下值:“<”!-- ko text:货币-->“<”!--/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">绑定(bind)到Currency属性。

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

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