Question

我遇到了使用Knockout.js创建视图模型的问题。我想问的是实现使用observable作为参数的函数绑定的方法。

我有这些实体框架类：

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>

但是当我尝试使用visualBase.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;
    }
}

更改绑定后，视图开始显示演员＆＃39;加载时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

您需要在映射中绑定ChangeMode函数。

在Knockout.js

2 个答案: