Question

我有一个ASP.NET MVC项目，我正在使用淘汰赛，我有几个复选框，我希望它们在服务器更改时触发和更新。我习惯于使用订阅并将我的代码（Ajax调用）放在订阅回调上。

问题是订阅没有订阅，因此代码永远不会运行。

<script type="text/javascript">

    function JobViewModel() {
        var self = this;
        var baseUri = '/Api/Pedidos/';            
        self.TotalItems = ko.observable(@Model.TotalItems);
        self.AbreviaNome = ko.observable(@Model.AbreviaNome.ToString().ToLower());
        self.AbreviaFantasia = ko.observable(@Model.AbreviaFantasia.ToString().ToLower());
        self.AbreviaLogradouro = ko.observable(@Model.AbreviaLogradouro.ToString().ToLower());
        self.AbreviaComplemento = ko.observable(@Model.AbreviaComplemento.ToString().ToLower());
        self.AbreviaBairro = ko.observable(@Model.AbreviaBairro.ToString().ToLower());
        self.AbreviaCidade = ko.observable(@Model.AbreviaCidade.ToString().ToLower());
        self.AbreviaExtra = ko.observable(@Model.AbreviaExtra.ToString().ToLower());
        self.AbreviaNomeSubscriptions = ko.computed(function () {
            return self.AbreviaNome.getSubscriptionsCount();
        })

        var updatableData = {
            Id: '@Model.Id',                
            Status: '@((int)Model.Status)',                
            File: '@Model.File',                
            AbreviaNome: self.AbreviaNome,
            AbreviaFantasia: self.AbreviaFantasia,
            AbreviaLogradouro: self.AbreviaLogradouro,
            AbreviaComplemento: self.AbreviaComplemento,
            AbreviaBairro: self.AbreviaBairro,
            AbreviaCidade: self.AbreviaCidade,
            AbreviaExtra: self.AbreviaExtra                
        };            

        self.update = function () {
            alert(updatableData.AbreviaNome());
            $.ajax({
                type: "PUT",
                url: baseUri + '@Model.Id',
                data: ko.toJSON(self),
                dataType: "json",
                contentType: "application/json"
            })
                .done(function (data) {

                    alert('Magic');
                })
                .error(function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                    alert("fail");
                });
        };

        self.AbreviaNome.subscribe(function (newValue) {
            alert(newValue);                
            self.update();
        });
    }

    function JobDetailsViewModel() {
        var self = this;
        var baseUri = '/Api/Pedidos/';
        self.Job = new JobViewModel();            
    };

    $(document).ready(function () {            
        ko.applyBindings(new JobDetailsViewModel());            
        $('input[type=file]').bootstrapFileInput('Selecione o arquivo');            
    });
</script>

HTML的一部分

<div class="col-lg-10">
<div class="btn-group btn-group-sm" data-toggle="buttons">
    <label class="btn btn-default " data-bind="css: {active:Job.AbreviaNome}">
        <input type="checkbox" data-bind="checked: Job.AbreviaNome" name="type" id="AbreviaNome">Nome/Razão<span data-bind="text: ' (' + Job.AbreviaNomeSubscriptions() + ')'"></span><span data-bind="text: ' (' + Job.AbreviaNome() + ')'"></span></input>
    </label>
    <label class="btn btn-default" data-bind="css: {active: Job.AbreviaFantasia}">
        <input type="checkbox" data-bind="checked: Job.AbreviaFantasia" name="type" id="AbreviaFantasia">Apelido/ Fantasia </input>
    </label>
</div>

看起来一切正确，但当我点击复选框时，没有任何反应。

编辑：

我还没有找到解决方案，但似乎bootstrap影响了这里发生的事情。定义复选框的“颜色”和“活动”的标签就在它周围，当单击复选框时，它会更改状态（活动/未激活），但不会更改复选框的值，因此不会触发别的什么。

Answer 1

你的绑定表达是

data-bind="checked: Job.AbreviaNome"

我猜您之前在HTML中使用了“with”语句 - 或者定义“Job”的内容？否则你应该收到一个错误但你说控制台里什么都没有。

AbreviaNome的初始值是@ Model.AbreviaNome.ToString（）。ToLower（），这可能不会转换为“已检查”绑定所需的布尔值。

Answer 2

在我看来，你正在做的一切正确。实际上，当我提取代码的相关部分进行测试时，它完美无缺！

JSFiddle Test

请在加载期间和更改复选框值后再次检查控制台错误。

Knockout Observable Subscription未能订阅

2 个答案: