在 Knockout.js 中绑定函数的结果

Question

我在使用 Knockout.js 创建视图模型时遇到了问题。我想问的重点是实现使用可观察对象作为参数的函数绑定的方法。

我有这些实体框架类：

public class Actor
{
    public int Id { get; set; }
    public string ActorName { get; set; }
    public List<ActorCurrentStatus> ActorStatuses { get; set; }
}

public class ActorCurrentStatus
{
    public long Id { get; set; }
    public double Rating { get; set; }
    public MatchType MatchType { get; set; }
    public string CurrentStatusIndicator { get; set; }
    //Foreign Key Conditions
    public long Actor_Id { get; set; }
    public virtual Actor Actor{ get; set; }
}

public enum MatchType
{
    type_team,
    type_ffa
}

public class ActorsListViewModel //View Model (not in database)
{
    public int Id { get; set; }
    public List<Actor> Actors { get; set; }
}

Controller 将 Actor 列表传递给视图：

public ActionResult ActorsList()
{
    ActorsListViewModel vm= new ActorsListViewModel();
    viewModel.vm= _db.Actors.ToList();
    return View(vm);
}

然后在视图中创建一个js对象：

<script type="text/javascript">
    var model = @Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented,
                    new JsonSerializerSettings()
                    {
                        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                    }));
</script>

它通过 ko.mapping.fromJS 成为一个 viewModel，具有以下映射选项：

var mapping = {
    create: function (raw) {
        var modelBase = ko.mapping.fromJS(raw.data);
        //using linq.js
        modelBase.getActorStatus = function (data, modeStr) {
            return Enumerable.From(ko.mapping.toJS(data)).Single(t => t.CurrentStatusIndicator == modeStr);
        }
        modelBase.mode = ko.observable('type_team');
        return modelBase;
    }
}

var viewModel = ko.mapping.fromJS(model, mapping);
ko.applyBindings(viewModel);

这里可以正常工作：

<div data-bind="foreach: Actors()">
    <div data-bind="text: $parent.getActorStatus(ActorStatuses ,'type_team').Rating"></div>
</div>

但是当我尝试使用 modelBase.mode 的 observable 来设置绑定条件时出现问题，所以我将这些内容插入到视图中：

<button data-bind="click: ChangeMode('type_team')">TYPE_TEAM</button>
<button data-bind="click: ChangeMode('type_ffa')">TYPE_FFA</button>

并将绑定更改为：

<div data-bind="text: $parent.getActorStatus(ActorStatuses ,$parent.mode).Rating"></div>

这里的函数ChangeMode是这样的：

function ChangeMode(str) {
    switch (str) {
        case 'type_team':
            viewModel.mode = 'type_team';
            break;
        case 'type_ffa':
            viewModel.mode = 'type_ffa';
            break;
        default:
            break;
    }
}

更改绑定后，视图在加载时开始显示演员的 type_ffa 评分，并且在单击按钮时不会更新信息。

谁能指出代码和结构中存在哪些错误？

Answer 1

Observable 对象要求您通过将其作为参数传递来分配值。所以它需要你做到以下几点：

function ChangeMode(str) {
  switch (str) {
    case 'type_team':
        viewModel.mode('type_team');
        break;
    case 'type_ffa':
        viewModel.mode('type_ffa');
        break;
    default:
        break;
  }
}

同样从ChangeMode 函数的结构方式来看，我相信在调用ko.applyBindings 时该函数没有绑定在一起。这意味着这只是一个普通的 javascript 函数。因此，您不能使用 data-bind: click 来触发此操作，而是使用普通的 onclick。

<button onClick="ChangeMode('type_team')">TYPE_TEAM</button>
<button onClick="ChangeMode('type_ffa')">TYPE_FFA</button>

Answer 2

查看此链接http://knockoutjs.com/documentation/click-binding.html

你需要在mapping中绑定ChangeMode函数。