Question

我不确定为什么我的依赖可观察URL没有在选择列表更改时更新。 iframe应该更新select on change事件上的url但没有任何反应。依赖的observable虽然如此，但模板没有更新。它没有模板只使用静态定义的HTML，但我没有尝试创建模板，iframe不会更新。

查看

    @model AvatarViewModel
    @{
        ViewBag.Title = "Index";
        Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
    }
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.instructor }'>
    </div>
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.assistantInstructor }'>
    </div>
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.opponent }'>
    </div>
    <script id="editableAgentTemplate" type="text/html">
        <div>
        <div>
            <iframe style="width: 125px; height: 100px; border: none" scrolling="no" frameborder="0"
                 data-bind="attr: { id: name, name: name, src: url }">
            </iframe>
        </div>
        <select data-bind="options: agents, optionsText: 'Title', optionsValue: 'Id', value: selectedId,">
        </select>
        <button data-bind="click: function() { caseStudy.saveAvatar(name, id) }">
            Update
        </button>
        <input type="text" data-bind="value: text" />
        <button data-bind="click: function() { app.viewModel.caseStudy.speak(text, name) }">
            Speak
        </button>
    </div>
    </script>
    @section Script {
        <script src="/Scripts/app.avatars.js" type="text/javascript"></script>
        <script src="/Areas/Admin/Scripts/app.admin.casestudy.avatars.js" type="text/javascript"></script>
        <script type="text/javascript">
            app.avatars.init(@Html.Raw(@Model.Avatars.ToJson()));
            app.admin.caseStudy.init('@ApplicationAvatarType.Instructor.ToString()', '@ApplicationAvatarType.AssistantInstructor', '@ApplicationAvatarType.Opponent');
        </script>
    }

JS档案

(function (app, $, undefined) {

    app.viewModel = app.viewModel || {};
    app.admin.caseStudy = app.admin.caseStudy || {};

    var controller = '/Admin/CaseStudy/Avatars';

    var urls = {
        GET_AVATARS: controller + '/GetAvatars',
        SAVE_AVATAR: controller + '/SaveAvatar'
    };

    var editableAgent = function () {
        this.id = ko.observable(0);
        this.selectedId = ko.observable(0),
        this.name = ko.observable('');
        this.text = ko.observable('');
        this.agents = ko.observableArray();
        this.url = ko.dependentObservable(function () {
            console.log('url');
            if (this.selectedId())
            return '/Avatar/Avatar?assetId=' + this.selectedId();
        else {
            return '';
        }
        }, this);
    };

    app.viewModel.caseStudy = {
        instructor: ko.observable(new editableAgent()),
        assistantInstructor: ko.observable(new editableAgent()),
        opponent: ko.observable(new editableAgent()),
        agents: ko.observableArray()
    };

    app.viewModel.caseStudy.speak = function (text, type) {
        if (text().length > 0) {
            app.avatars.addAction({ AgentName: type(), Text: text(), Speech: text() });
            app.avatars.speak();
        }
    };

    app.admin.caseStudy.init = function (instructor, assistantInstructor, opponent) {

        app.viewModel.caseStudy.instructor().name(instructor);
        app.viewModel.caseStudy.assistantInstructor().name(assistantInstructor);
        app.viewModel.caseStudy.opponent().name(opponent);

        app.admin.caseStudy.getAvatars(function () {
            app.applyBindings();
        });
    };


    app.admin.caseStudy.getAvatars = function (callback) {
        var options = {
            url: urls.GET_AVATARS,
            callback: function (json) {
                if (json) {

                    app.viewModel.caseStudy.agents(json.Avatars);
                    app.viewModel.caseStudy.instructor().agents(json.Avatars);
                    app.viewModel.caseStudy.opponent().agents(json.Avatars);
                    app.viewModel.caseStudy.assistantInstructor().agents(json.Avatars);
                    app.viewModel.caseStudy.instructor().selectedId(json.Instructor.AssetId);
                    app.viewModel.caseStudy.opponent().selectedId(json.Opponent.AssetId);
                    app.viewModel.caseStudy.assistantInstructor().selectedId(json.AssistantInstructor.AssetId);
                    app.viewModel.caseStudy.instructor().id(json.Instructor.AssetId);
                    app.viewModel.caseStudy.opponent().id(json.Opponent.AssetId);
                    app.viewModel.caseStudy.assistantInstructor().id(json.AssistantInstructor.AssetId);

                    if (typeof (callback) === 'function') {
                        callback();
                    }
                }
            }
        };

        app.makeRequest(options);
    };

    app.viewModel.caseStudy.saveAvatar = function (type, assetId) {
        var options = {
            url: urls.SAVE_AVATAR + '?type=' + type + '&assetId=' + assetId,
            callback: function (json) {
                if (json) {
                    alert('Saved');

                }
            }
        };

        app.makeRequest(options);
    };

})(window.app = window.app || {}, jQuery);

Answer 1

这个问题包含了这个问题的所有内容：https://github.com/SteveSanderson/knockout/issues/133

如果你可以强制你的代理ID在服务器上或在JavaScript中使用（id +''works），那么你就不会看到问题。

此外，似乎基于代码的某些重组，这不再是1.3中的问题。因此，您可能希望尝试测试版：http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/

在Jquery模板中Knockout.js和选择列表不更新属性

1 个答案: