Knockout.js 将参数绑定到 Data-Target 返回对象而不是文本(手风琴)
Posted
技术标签:
【中文标题】Knockout.js 将参数绑定到 Data-Target 返回对象而不是文本(手风琴)【英文标题】:Knockout.js Binding param to Data-Target returning object instead of text (Accordion) 【发布时间】:2020-10-29 02:48:36 【问题描述】:刚接触 Knockout.Js,三天后我就开始了解数据绑定...
我创建了一个动态手风琴,并且在使用 attr 进行数据绑定时:'data-target': '#' + RecipeName' 我返回 Data-target=#[object object] 我知道我可以取回名字 如果我使用 data-bind="text:RecipeName" 参数(但我需要将 # 附加到它 让我的手风琴在正确的 ID 上打开..)
我在网上查了一下,似乎找不到足够的答案。我试过谷歌 开发工具将 #[object object] 更改为我期望的值,它工作正常。
请有人解释为什么会发生这种情况以及需要解决什么问题。我想这很简单?
<section id="results" style="margin-top: 1em;">
<div class="accordion-group">
<div class="accordion-heading">
<table class="table table-striped table-hover accordion">
<thead>
<tr>
<th>Set Next</th>
<th>Name</th>
<th>Bench</th>
<th>Transacted</th>
<th>Receipe Name</th>
</tr>
</thead>
<tbody data-bind="foreach: Stages">
*****<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: 'data-target': '#' + RecipeName">*****
<td data-bind="css: CellClass">
<button class="btn btn-warning" data-bind="attr: 'data-id': Id" data-toggle="modal" data-target="#moveReason">@html.LocalisedStringFor(model => model.MoveToStageText)</button>
<a class="text" data-bind="attr: 'data-id': Id" data-toggle="modal" data-target="#moveReason"><span>@Html.LocalisedStringFor(model => model.CurrentPositionText)</span></a>
</td>
<td><span data-bind="text: ProcessName"></span></td>
<td><span data-bind="text: BenchName"></span></td>
<td><span data-bind="text: TransactionStatus"></span></td>
<td><span data-bind="text: RecipeName"></span></td>
</tr>
<tr id="" class="accordion-body collapse" data-bind="attr: 'id':RecipeName">
<td colspan="5">
<div class="accordion-inner" data-bind="foreach: $parent.Stages">
<ul>
<li> <span data-bind="text: StepName"></span></li>
<button class="btn btn-warning" data-bind="attr: 'data-id': Id" data-toggle="modal" data-target="#moveReason">@Html.LocalisedStringFor(model => model.MoveToStageText)</button>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
这是它返回的结果
【问题讨论】:
【参考方案1】:我怀疑<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: 'data-target': '#' + RecipeName">
需要
<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: 'data-target': '#' + RecipeName()">
另一种选择是在您的视图模型上放置一个执行您需要的逻辑的属性
function ViewModel()
var self = this;
self.RecipeName = ko.observable();
self.RecipeNameHash = ko.pureComputed(function()
return '#' + self.RecipeName();
);
那么表格行就变成了
<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: 'data-target': RecipeNameHash">
【讨论】:
非常感谢!!你的回答对我有用.. 不幸的是我还不能投票,但我会在可能的时候投票!! slight tweek以上是关于Knockout.js 将参数绑定到 Data-Target 返回对象而不是文本(手风琴)的主要内容,如果未能解决你的问题,请参考以下文章
将多个输入绑定到可观察数组中的同一变量(Knockout.JS)