blocks|key|768268|text|萨姆你的小提琴数据太复杂了。当你问问题的时候，如果你把你的小提琴拉到了相关的元素上，你会提高你得到帮助的机会。我已经制作了一个简单小提琴，它演示了嵌套数组和删除。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|768269|这里是HTML，注意删除函数在数组的上下文中，所以它在$parent而不是$root上调用一个函数。这使我们可以直接针对上面的上下文，而不是根。|style|CODE|768270|<ul+data-bind="foreach:+editData">
++++<li>
++++++++<span+data-bind="text:+name"></span>
++++++++<button+data-bind="click:+$parent.removeParent">Remove+Parent</button>
++++++++...
++++++++++++
++++++++++++<button+data-bind="click:+$parent.removeChild">Remove+Child</button>

</ul>​|code-block|syntax|javascript|768271|这是父模型。注意，此处的删除函数用于移除子级。当调用removeChild函数时，它来自请求$parent的子上下文，它将调用此删除。|768272|var+Parent+=+function(name,+children)+{
++++var+self+=+this;
++++self.name+=+ko.observable(name);
++++self.children+=+ko.observableArray(children);
++++self.removeChild+=+function(child)+{
++++++++self.children.remove(child);
++++};
};|768273|您的小提琴也没有使用模型，这是MVVM开发的一个重要方面。您应该考虑通过关于淘汰赛网站的教程来更好地了解如何构造剔除应用程序。它将帮助你更容易地处理这样的问题。|768274|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/EenCp/1/|1|http://learn.knockoutjs.com/^0|1R|5|0|0|R|7|11|5|0|0|Q|B|1A|7|0|0|10|A|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]|$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$A|1D|B|1E|F|G]|$A|1F|B|1G|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|S|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

<p>Sam, your fiddle data was too complicated. When asking questions, you will improve your chance of getting help if you distill your fiddle down to the relevant elements. I have cooked up a <a href="http://jsfiddle.net/EenCp/1/" rel="nofollow">simple fiddle</a> that illustrates nested arrays, and removal.</p>

<p>Here is the HTML, note that the remove function is inside the context of the array, so it calls a function on <code>$parent</code> instead of <code>$root</code>. This lets us target the context directly above, instead of the root.</p>

<pre><code>&lt;ul data-bind="foreach: editData"&gt;
    &lt;li&gt;
        &lt;span data-bind="text: name"&gt;&lt;/span&gt;
        &lt;button data-bind="click: $parent.removeParent"&gt;Remove Parent&lt;/button&gt;
        ...
            &lt;!-- This line is on the child context --&gt;
            &lt;button data-bind="click: $parent.removeChild"&gt;Remove Child&lt;/button&gt;

&lt;/ul&gt;​
</code></pre>

<p>Here is the parent model. Note the removal function here is for removing children. When the <code>removeChild</code> function is called, it is from the child context asking for <code>$parent</code>, which will call this remove. </p>

<pre><code>var Parent = function(name, children) {
    var self = this;
    self.name = ko.observable(name);
    self.children = ko.observableArray(children);
    self.removeChild = function(child) {
        self.children.remove(child);
    };
};
</code></pre>

<p>Your fiddle also makes no use of models, which are an important aspect of MVVM development. You should consider going through <a href="http://learn.knockoutjs.com/" rel="nofollow">the tutorials on the knockout site</a> to get a better understanding of how to structure knockout applications. It will help you deal with problems like this much easier.</p>


blocks|key|1071819|text|您可以将单击的actionItem和包含的动作数组传递给deleteActionItem函数，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1071820|
<a+href="javascript:void(0)"+data-bind="click:+$root.deleteActionItem.bind($data,+$parent)">remove+item</a>|code-block|syntax|javascript|1071821|在您的模型中，您需要使用actionItem插件来观察每个ko.mapping数组(参见编辑函数)。|1071822|var+viewModel+=+function()+{
++++var+self+=+this;
++++self.data+=+ko.observable();

++++self.edit+=+function()+{
+++++++self.data+(+ko.mapping.fromJS(editData)+);
++++}
++++self.log+=+function()+{
++++++++console.log(self.data())
++++}
++++self.deleteAction+=+function(data)+{
+++++++//delete+root+node
+++++++self.data().remove(data)
++++}
++++self.deleteActionItem+=+function(data,actionItem)+{
++++++++//delete+items
++++++++data.ActionItems.remove(actionItem);
++++}
}|1071823|然后，您将能够从deleteActionItem函数中的数组中删除项，并且由于数组现在是可观察的，因此结果将反映到绑定的dom元素中。|1071824|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can pass the clicked actionItem and the containing action array to deleteActionItem function as follows: </p>

<pre><code>&lt;!-- /ko --&gt;
&lt;a href="javascript:void(0)" data-bind="click: $root.deleteActionItem.bind($data, $parent)"&gt;remove item&lt;/a&gt;
</code></pre>

<p>In your model you need to make every actionItem array observable using ko.mapping plugin (see edit function)</p>

<pre><code>var viewModel = function() {
    var self = this;
    self.data = ko.observable();

    self.edit = function() {
       self.data ( ko.mapping.fromJS(editData) );
    }
    self.log = function() {
        console.log(self.data())
    }
    self.deleteAction = function(data) {
       //delete root node
       self.data().remove(data)
    }
    self.deleteActionItem = function(data,actionItem) {
        //delete items
        data.ActionItems.remove(actionItem);
    }
}
</code></pre>

<p>Then you will be able to remove the item from array in the deleteActionItem function and since the array is observable now, the result will reflect to binded dom element.</p>


<h3>Issue:</h3>
<p>I'm still learning knockoutJS, please guide me if my approach is wrong.</p>
<p>Here is my fiddle: <a href="http://jsfiddle.net/amitava82/wMH8J/25/" rel="nofollow noreferrer">http://jsfiddle.net/amitava82/wMH8J/25/</a></p>
<p>While onclick of edit, I receive the json model which is represented in the view and I want to remove certain items (child array) or actions (parent array) from the model (I removed add UI to add more Actions from the fiddle for simplicity) and then finally pass the model back to server.</p>
<p>Now, deleting from root level is easy. I'm stuck with deleting individual item which is  <strong>ActionParamaters</strong> in <strong>ActionItems</strong> array.</p>
<h3>Question:</h3>
<p>How do I remove an item from a child array?</p>


KnockoutJS : How do I remove an item from a child array?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

问题：我还在学习knockoutJS，如果我的方法是错误的，请指导我。这是我的小提琴：在单击编辑时，我收到视图中表示的json模型，并希望从模型中删除某些项(子数组)或操作(父数组)(为了简单起见，我删除了添加UI以从小提琴中添加更多操作)，最后将模型传递回服务器。现在，从根级删除是很容易的。我不得不删除单个项，即Ac...

问KnockoutJS :如何从子数组中删除项？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KnockoutJS :如何从子数组中删除项？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KnockoutJS :如何从子数组中删除项？
EN