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

Question

为了简单起见，想象构建一个流程图设计器。代表每个形状的 markup/template 呈现在索引页面上（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 表示。 Flow 有点像，构建流程图.. 构建一棵树，如 json 表示流程图的数据，保存，重建流程图。

约束条件：

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

提前致谢！

Answer 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

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

re rendering and binding composable UI after save

jquery

razor

knockout.js

single-page-application