保存后重新呈现和绑定可组合的UI

Question

为了简单起见，想象一下构建流程图设计器。表示每个形状的标记/模板呈现在索引页上(生成敲除模板的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数据，保存，重建流程图。

制约因素：

1. 模板或模板目录必须来自服务器，因为一行中将添加更多的模板。(让我们说这是一个商业决定)
2. 我可以控制剃刀模板的标记。

提前感谢！

Answer 1

我认为您正在寻找动态模板，请参见文档 (注5)，为了重新呈现UI，您只需使用模板绑定更新可观察到的UI即可。

<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")); 

请参阅工作样品