JsViews：使用深度复制对象重新初始化模板：〜root问题

Question

我正在尝试使用数据链接对象的深层副本来创建撤消过程（重新初始化模板）。这可能不是理想的方法，但是我现在不能使用视图模型，merge（）和unmap（）。

mainObject渲染templateA（从AJAX请求派生的mainObject，类型：json）

mainObject = $.extend(true, mainObject, addObject);添加用于编辑目的的其他对象，渲染templateB（从AJAX请求派生的addObject，类型：json）

我使用上面的两个模板和对象已经有一段时间了。

现在...

在用户取消编辑（双向数据链接）的情况下，我想复制mainObject的深层副本/副本。

[当我创建mainObjectClone = JSON.parse(JSON.stringify(mainObject))并使用相同的模板templateB重新渲染时，出现与上下文~root相关的错误。

据我了解，JSON.parse（）返回与AJAX请求相同类型的对象，类型：json。

要么不返回对象，要么出现类似Uncaught TypeError: Cannot read property '0' of undefined的错误。 +（（v = view.ctxPrm（“ root”）。myPhotos [j._sq（0）]）！= null？v：“”）

打开调试后，模板的所有部分都可以正常渲染，除非使用~root。

[奇怪的是，~root在我在模板中定义的位置上不起作用...但是在进一步测试中，如果我将~root添加到“不同的”顶级对象中（不需要上下文），它在那里工作很奇怪。

我已经尝试过这些并且都在~root上中断：

• myObjectClone = $.extend(true, {}, mainObject)
• Lodash深度复制
• 还将对象顺序从mainObject, addObject反转为mainObject = $.extend(true, addObject, mainObject)也会中断~root访问（扩展第一个对象）。>>

我已经尝试过，但是未能在jsfiddle中重现该问题...尽管数据/模板有限。

控制台日志显示所有对象的格式正确。

如何在某些或所有对象上创建/初始化~root？

哪些代码冲突可能会更改~root上下文？

任何提示或指示，将不胜感激。

---

UPDATE

尽管我已经注释掉了所有辅助工具等，以简化模板+数据（打开调试）...〜root问题仍然存在。这“最终”使我相信，这与模板或数据无关。

这是我的情况：

• [TemplateA使用link（）与DataA呈现（没有问题）
• [TemplateB使用具有深层复制/克隆对象（DataA + DataB）（〜根问题）的link（）呈现）>
• 模板A和B共享公用的双向数据链接项，尽管它们来自不同的数据源。

如果我将TemplateA的render方法更改为render（）（而不是link（））；然后呈现TemplateB，〜root context works

。

[另一种情况：而不是使用深层复制/克隆对象（DataA + DataB）来呈现TemplateB ...我将服务器上的数据合并并针对该数据进行呈现。这也产生了〜root上下文问题。

然后，我认为从多个模板调用link（）时可能会出现一个问题，即它们的同名对象会发生冲突。因此，我隔离了一个通用对象，将其重命名并渲染了具有更改名称的测试模板。

这就是我现在所知道的；-）

我正在尝试使用数据链接对象的深层副本来创建撤消过程（重新初始化模板）。这可能不是理想的方法，但是我现在不能使用视图模型，merge（）和unmap（）。 ...

在这里回答我自己的问题...

这里的JsViews没问题

...〜root的问题是我自己创建的；-）

问题是由于将link（）templateB注入link（）templateA导致的，因此与〜root发生冲突。

我的数据源和模板曾经组合在一起...我将它们分开进行测试，但思路不清晰。

基本上，我正在这样做：

<script id="templateA" type="text/x-jsrender">
    <div id="userView">...</div>
    <div id="editView"></div>
</script>

<script id="templateB" type="text/x-jsrender">
    ...
</script>


$.templates("#templateA").link("#userView", dataA)

onClick openEditView...

$.templates("#templateB").link("#editView", $.extend(true, dataA, dataB))
修复非常简单，类似这样：
<script id="templateA" type="text/x-jsrender">
    <div id="userView">...</div>
    {{if editable}}
         {{include tmpl="templateB" /}}
    {{/if}}
</script>

<script id="templateB" type="text/x-jsrender">
    ...
</script>


$.templates("#templateA").link("#userView", dataA)

onClick openEditView...

$.extend(true, dataA, dataB))
这解决了〜root问题，现在深层复制对象方法也可以使用。

Answer 1

在这里回答我自己的问题...