保存后重新渲染和绑定可组合 UI答案

【问题标题】：re rendering and binding composable UI after save保存后重新渲染和绑定可组合 UI
【发布时间】：2015-05-28 04:39:34
【问题描述】：

为了简单起见，想象一下构建一个流程图设计器。代表每个形状的标记/模板呈现在索引页面上（cshtml 模板生成剔除模板）。用户拖放形状以创建流程图。保存流程图。现在我想重新渲染流程图并将其绑定到保存的模型数据。一些伪代码

<script name="rectangle" type="text/html">
<input id="rectangle_t" type="text" data-bind="value:rectangle_name"></text>
</script>

<script type="text/javascript">
   function RectangleViewModel(){
    // instances of this model gets saved when a flowchart containing 
    // a rectangle is saved
     return {
        "rectangle_name" : ko.observable()  
    };
   }
</script>

问题：一旦保存在后端，如何重新渲染流程图？我会从服务器获得一个 json 和模板，我想重建 json 的 UI 表示。流程类似于，构建流程图.. 构建一个表示流程图的 json 数据树，保存，重建流程图。

约束：

模板或模板目录必须来自服务器，因为后续会添加更多模板。（假设这是一个商业决策）
我可以控制剃刀模板的标记。

提前致谢！

【问题讨论】：

题主不清楚的可以更新题。
我不完全确定您实际上在问什么 - 您的问题似乎没有问题？
@JamesThorpe 我已经明确添加了一个问题部分。希望它能让事情变得清晰。
渲染代码是否使用订阅来观察模型等的变化？我有一个项目，其中包含一堆基于视图模型中的数据在画布上呈现的东西 - 在这种情况下，它只是将数据加载回
是的，我有使用敲除的模型绑定。我是一个冒险进入前端世界的服务器端人。一个简单的例子会很酷。谢谢！

标签： jquery razor knockout.js single-page-application

【解决方案1】：

我认为您正在寻找动态模板，请参阅documentation（注5）为了重新渲染 UI，您只需要使用模板绑定更新您的 observable。

<div data-bind='template: { name: shape }' />

还有你的 javascript 代码

function RectangleViewModel(name, shape) {   
   this.name = ko.observable(name);
   this.shape = ko.observable(shape);

   this.changeShape = function () {       
       this.shape(this.shape.peek() === "circle" ? "rectangle" : "circle");
    };
};

ko.applyBindings(new RectangleViewModel("Name", "rectangle"));

见working sample

【讨论】：

就我而言，可能有不止一种模板。如果这是有道理的。欣赏它。
在示例中有 2 种模板 - 圆形和矩形。您可以根据需要添加任意数量的模板。只需将模板名称设置为 shape observable 即可更新 UI。