Question

尝试创建自定义鼠标悬停绑定但遇到问题。我一直收到错误

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: FadeIn: $data, event: {mouseover: Flash}
Message: Flash is not defined

有什么想法吗？这是我的提琴手http://jsfiddle.net/ricobano/YuyV6/5/

的链接

<ul data-bind="foreach: News">
        <li data-bind="FadeIn: $data, event: {mouseover: Flash}">
            <div class="InfoWrapper">
                <span data-bind="text: formatTime()"></span>
            </div>
            <div class="NewsWrapper">
                <h3 data-bind="text: StrapLine"></h3>
                <div class="NewsBody" data-bind="html: Body"></div>
            </div>
            <br style="clear:both;"/>
        </li>
    </ul>

JS

ko.bindingHandlers.FadeIn = {
    init: function(element, valueAccessor){
        $(element).hide();
    },
    update: function(element, valueAccessor){
        $(element).fadeIn(1000);
    }
};

ko.bindingHandlers.Flash = {
    update: function(element, valueAccessor){
        console.log($(element).html());
        $(element).animate({
            "background-Color": "Red"
            }, 100);   
    }
};

function News(data){
    this.Id = data.Id;
    this.Time = data.Time;
    this.StrapLine = data.StrapLine;
    this.Icon = data.Icon;
    this.Body = data.Body;

    this.formatTime = function(){
        return this.Time + ":";
    };
}

function NewsVM(){
    var self = this;
    self.Increment = 0;

    self.TempArray = [
       new News({id:"1", Time:"9.40", StrapLine:"FOOTBALL", Icon:"Icon", Body:"<p>Manchester United manager David Moyes has been keeping busy since arriving in Australia, spending his time making a £25m bid for Cesc Fabregas and preparing his team for Saturday's friendly against the A-League All-Stars.</p><p>It has not been all work for Moyes, however, as the Scot enjoyed taking several pictures of the iconic scenery on show in Sydney Harbour at the weekend.</p>"}),
       new News({id:"2", Time:"9.50", StrapLine:"WOMEN'S FOOTBALL", Icon:"Icon", Body:"<p>BBC Sport's Alistair Magowan reports from Linkoping: \"In her BBC Sport column, England skipper Casey Stoney says no-one's place is safe for the match against Russia tonight following the opening Euro 2013 defeat by Spain.</p><p>From what we are hearing, though, boss Hope Powell could be prepared to give the team a second chance. But there are some talented youngsters such as Arsenal midfielder Jordan Nobbs and Everton striker Toni Duggan waiting in the wings.\"England v Russia is live on BBC2 tonight with the programme beginning at 16:30 BST with kick-off at 17:00 BST. There is also live text commentary on the BBC Sport website.</p>"}),
       new News({id:"3", Time:"9.52", StrapLine:"ATHLETICS", Icon:"Icon", Body:"<p>Michelle Verroken, former director of ethics and anti-doping for UK Sport, tells BBC Radio 5 live there needs to be more action taken to help athletes after the failed drug tests of sprinters Asafa Powell and Tyson Gay.</p><p>\"It's devastating for the sport and a huge surprise,\" said Verroken.</p>"}),
       new News({id:"4", Time:"9.58", StrapLine:"FORMULA 1", Icon:"Icon", Body:"Susie Wolff will have her first full Formula 1 test at the wheel of a Williams in this week's 'young-driver' test at Silverstone.Wolff, 30, is currently the development driver for Williams. She raced in the DTM German touring car championship for seven years before quitting the series to concentrate on her work with the British outfit.\"There is very limited testing, so you only get one chance. You have to grab it with both hands\", she tells BBC Radio 5 live"}),
        new News({id:"5", Time:"10.02", StrapLine:"FOOTBALL - CESC FABREGAS", Icon:"Icon", Body:"One Manchester United fan has been quick to celebrate the possible arrival of Barcelona's Cesc Fabregas.The midfielder's Wikipedia page has been updated to incorrectly state.\"On the 17th of July Cesc moved to sunny Manchester, and was quoted as saying \"it is good to be playing for a team in England where I can actually win things\".But what is your reaction to the news? How good a signing would he be for Manchester United? Arsenal fans, how would you feel if your former captain joined David Moyes's side?Let us know your thoughts on Twitter, via #bbcsportsday"})];

    this.News = ko.observableArray();

    self.AddNews = function(){
        if(self.TempArray.length -1 == self.Increment){
            self.Increment = 0;
            self.News.removeAll();
            return;
        }

        self.News.unshift(self.TempArray[self.Increment]);
        self.Increment++;
    };

    setInterval(function(){
        console.log("called");
        self.AddNews();
        },5000
   );
}


ko.applyBindings(new NewsVM());

Answer 1

1）原因是您使用Flash范围调用News函数。您需要致电$root.Flash

2）Flash必须是使用mouseover事件

进行调用的函数

3）jQuery无法为背景颜色设置动画，而是使用css过渡jQuery animate backgroundColor

请在此处查看工作代码：http://jsfiddle.net/kreeg/YuyV6/8/

自定义鼠标悬停绑定在knockout.js中不起作用

1 个答案: