Question

我正在使用KnockoutJS构建一个播放音乐的ASP .NET Web应用程序。我有以下代码用于播放来自本地文件路径的JS数组的音频。我无法将ASP .NET和Knockout带到＆＃34;玩得很好＆＃34;。

以下是我工作的一个基本示例：

＆＃13;

ko.bindingHandlers.audio = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            element.src = value;
            element.load();
            element.play();
        }
    }
};

//Note: only the last URL is currently active.
Urls = [
    'http://www.noiseaddicts.com/samples/280.mp3',
    'http://www.noiseaddicts.com/samples/289.mp3',
    'http://www.noiseaddicts.com/samples/294.mp3',
    'http://www.w3schools.com/TAGs/horse.ogg',
]

function vm() {
    this.myIndex = ko.observable(3);

    this.URL = ko.computed(function () {
        return Urls[this.myIndex()];
    }, this)

    this.myFunction = function()
    {
        this.myIndex();
    }
};
ko.applyBindings(new vm());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <input type="text" name="name" data-bind="value: myIndex" />
    URL:<text type="text" name="name" data-bind="text: URL" ></text>
</form>

<audio data-bind="audio: URL" controls autoplay></audio>

＆＃13;

在我的应用程序中，我显然不希望用户必须输入歌曲的编号，而是应该向下滚动我的列表并单击他们想要播放的歌曲旁边的播放按钮。

这有两个问题：

如何获取歌曲的编号，以便它可以与Knockout一起使用？
如何将该数字与每个按钮关联以更新myIndex？

这就是我目前显示歌曲列表的方式：

<script type="text/javascript">
    var Urls = [];
</script>

@if (Model != null)
{
    foreach (MusicStream.Models.SongViewModel song in Model)
    {
        @Html.Partial("~/Views/Shared/Song.cshtml", song);
    }
}

然后在局部视图中我显示歌曲的名称和播放按钮（这是主要问题）。我还将url添加到JS数组中。

    <input type="button" value="Play" data-bind="click: myFunction" />

    <script type="text/javascript">
        Urls.push('@Url.Content(Model.FilePath)');
    </script>

如果有帮助，这里是该网站部分内容的屏幕截图。我在页面上有一些其他功能，但它们并不相关。请忽略歌曲标题旁边的括号中的数字。

我已经考虑过使用Knockout的foreach绑定来显示我的歌曲列表，但是看起来它似乎是多余的，因为我会在每首歌的C＃和JS中都有一个模型。

我一直在玩这个问题已经有一段时间了，而且还找不到合适的方法来修复它。我对任何其他更好/更容易的技术持开放态度。另外，非常感谢您的时间！

Answer 1

您可以将myFunction网址作为参数传递给data-bind="myFunction.bind($data,'@Url.Content(Model.FilePath)')"，请参阅：<input type="button" value="Play" data-bind="click: myFunction.bind($data,'@Url.Content(Model.FilePath)')" />，更改为：

部分：

function vm() {

    this.URL = ko.observable("");

    this.myFunction = function(url)
    {
        this.URL(url);
    }
};

视图模型：

click

请参阅代码片段，如何将参数传递给var viewModel = function(){ var self = this; this.myText = ko.observable(); this.myFunction= function(text){ self.myText(text); }; } ko.applyBindings(new viewModel());绑定函数：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type="text" data-bind="value:  myText"/>

<input type="button" value="Play" data-bind="click: myFunction.bind($data,'url')" />

HttpWebRequest

如何关联asp .net和KnockoutJS之间的按钮？

1 个答案:

部分：

视图模型：