属性更改 KnockoutJs 未更新可见性

Question

我在过去 3 小时内搜索互联网寻找解决方案，但一无所获。我找到的最接近我正在寻找的东西在这里：Is it possible to data-bind visible to the negation ("!") of a boolean ViewModel property?。而且我无法让这个解决方案发挥作用。

我正在尝试基于视图模型的 childlistitem 的属性隐藏 dom 元素。

    function ViewModel() {
        var self = this;

        this.addSocialMediaLink = function () {
            self.EditProjectSocialMediaViewModels.push({ ProjectId: 0, ProjectSocialMediaId: 0, SocialMediaType: '', Url: '', Deleted: false });

        }.bind(this);

        self.removeSocialMediaLink = function (socialLink) {
            socialLink.Deleted = true;
        }
    }

    $(function () {
        ko.bindingHandlers.hidden = {
            update: function (element, valueAccessor) {
                ko.bindingHandlers.visible.update(element, function () {
                    return !ko.utils.unwrapObservable(valueAccessor());
                });
            }
        };

        var myViewModel = new ViewModel();
        $.getJSON('@Url.Action("GetProject")' + '/ProjectId', null, function (data) {
            ko.mapping.fromJS(data, {}, myViewModel);
            ko.applyBindings(myViewModel);
        });
    });

服务器端虚拟机

public class EditProjectSocialMediaViewModel
{
    public int ProjectId { get; set; }

    public int ProjectSocialMediaId { get; set; }

    [Required]
    [Url]
    [StringLength(100, ErrorMessage = "The {0} must be no longer than 100 characters.")]
    public string Url { get; set; }

    public bool Deleted { get; set; }
}

Dom：

<div data-bind='foreach: EditProjectSocialMediaViewModels'>
    <input type="text" class='required form-control' data-bind='value: Url, hidden: Deleted, attr: { name: "EditProjectSocialMediaViewModels["+$index()+"].Url" }' />
    <a href="#" data-bind="click: $root.removeSocialMediaLink">Delete</a>
    <br />
</div>
<button data-bind='click: addSocialMediaLink'>Add Social Media Link</button>

单击链接时，值会更改并正确存储。但可见性不会改变。

Answer 1

可见性没有改变，因为已删除的属性不可观察，使其可观察。

function ViewModel() {
 var self = this;
 self.EditProjectSocialMediaViewModels = ko.observableArray([]);
 this.addSocialMediaLink = function () {
     self.EditProjectSocialMediaViewModels.push({
         ProjectId: 0,
         ProjectSocialMediaId: 0,
         SocialMediaType: '',
         Url: '',
         Deleted: ko.observable(false)
     });

 }.bind(this);

 self.removeSocialMediaLink = function (socialLink) {
     socialLink.Deleted(true);
 }
}

http://jsfiddle.net/U8j5G/