Question

我正在为自己（以及未来的其他人）制作一个天气页面，并且有一个显示和隐藏天气警报按钮的问题。您可以view the page查看我正在尝试做的事情。（对不起，我正在选择FL，但他们现在有很多提醒）。

我将警报发送到阵列中，对于每个项目，我需要一个显示和隐藏警报的按钮。我的页面源包含：

<div data-bind="foreach: alertsViewModel.features">
    <div class="col-12">
        <div class="alert alert-danger" role="alert">
            <p>
                <strong data-bind="text: properties.headline"></strong>
                <button type="button" class="btn btn-link" data-bind="click: $root.showHideAlert">Show</button>
            </p>
            <div data-bind="attr: {id: properties.id}" style="display: none;">
                <p data-bind="lineBreaks: properties.description"></p>
                <p><strong>Instructions</strong></p>
                <p data-bind="lineBreaks: properties.instruction"></p>
            </div>
        </div>
    </div>
</div>

我的ViewModel看起来像：

// ==================
// Alerts View Model
// ==================
var alertsViewModel = {

    features: ko.observableArray([]),
    hwoUrl: ko.observable(""),
    hwoText: ko.observable(""),
    showHideAlert: function(data, event){
        alert('you clicked');
        /*$('#hwo').toggle('slow',function(){
            if ($('#showHwo').text() == "Show")
            {
                $('#showHwo').text("Hide");
            } 
            else 
            {
                $('#showHwo').text("Show");
            }
        });*/
    }
};

ko.applyBindings(weatherViewModel, document.getElementById('weather-alerts'));

我尝试了一些不同的方法，但我无法解决任何问题。（因此注释代码和警报）。这很奇怪，因为我过去几次这样做没有任何问题。我确信这是我错过的一些简单的事情。任何帮助将不胜感激。

Answer 1

或许是因为您在调用ko.applyBindings而不是alertsViewModel时使用了weatherViewModel？

我认为按钮绑定中的$ root是指weatherViewModel，因为那是由ko应用的VM。

也许尝试更改函数的位置或仅使用alertViewModel。

Knockout Click事件不起作用

1 个答案: