如何在html renderPartial中替换字符串?

时间:2017-06-22 03:38:38

标签: html knockout.js renderpartial

                    @{ Html.RenderPartial(MVC.Shared.Views.Partials.CameraTagVideoPlayer, new CameraTagVideoPlayerViewModel("applicationVideo", "xxx")); }

我想用特定的敲除数据绑定替换“xxx”。

例如,

<span data-bind="text: application.applicationKey"></span>

给了我一个人的applicationKey。我想把这个键放在RenderPartial里面来播放视频。有没有办法做到这一点?

编辑:

public static class Partials
{
    public readonly static string _CurvedSelector = "~/Views/Shared/Partials/_CurvedSelector.cshtml";
    public readonly static string SelectMonthOptions = "~/Views/Shared/Partials/SelectMonthOptions.cshtml";
    public readonly static string SelectStateOptions = "~/Views/Shared/Partials/SelectStateOptions.cshtml";
    public readonly static string SelectYearOptions = "~/Views/Shared/Partials/SelectYearOptions.cshtml";
    public readonly static string ToggleButton = "~/Views/Shared/Partials/ToggleButton.cshtml";
    public readonly static string CameraTagVideoPlayer = "~/Views/Shared/Partials/CameraTagVideoPlayer.cshtml";
    public readonly static string CreditCardFormFields = "~/Views/Shared/Partials/CreditCardFormFields.cshtml";
    public readonly static string CreditCardJavascript = "~/Views/Shared/Partials/CreditCardJavascript.cshtml";
    public readonly static string AntiBotFormFields = "~/Views/Shared/Partials/AntiBotFormFields.cshtml";
    public readonly static string ExitModal = "~/Views/Shared/Partials/ExitModal.cshtml";

}

cameratagvideoplayer.html:

@model CameraTagVideoPlayerViewModel

@{
    // CameraTag video security
    long expiration = Utilities.ToUnixTimestamp(DateTime.UtcNow.AddMinutes(30)); // can be no more than 1 hour
    string signature = Utilities.CreateTokenHmacSha1(expiration.ToString(), AppSettings.Current.CameraTagRestApiKey);
}

<player id="@Model.Id" 
        data-uuid='@(Model.VideoUuid)' 
        data-options='{"width":"100%","height":"100%", "aspectratio":"4:3", "displaytitle":"false","displaydescription":"false"}' 
        data-signature="@signature" data-signature-expiration="@expiration"></player>

1 个答案:

答案 0 :(得分:1)

如果在查看此视图​​时启用了knockout,则可以使用attr绑定(http://knockoutjs.com/documentation/attr-binding.html):

<player id="@Model.Id" 
    data-bind="attr: { 'data-uuid': application.applicationKey }"
    data-options='{"width":"100%","height":"100%", "aspectratio":"4:3", "displaytitle":"false","displaydescription":"false"}' 
    data-signature="@signature" 
    data-signature-expiration="@expiration">
</player>

希望这有帮助。

更新1 这个问题是关于相机标签(https://cameratag.com/)。此javascript库使用onload事件查找<player>标记。您可以添加新标签,但不能修改现有标签。

您可以创建一个自定义绑定,在每次更改时创建一个新的<player>标记(当然,删除旧标记):

ko.bindingHandlers.uuid = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();
 //console.log(allBindings())
        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);
        var parentId = `${$(element).attr('id')}`
        var childId = `${parentId}_child`
        var childIdHash = `#${parentId}_child`

        // Delete de old <player>
        $(childIdHash).remove();

        var player = $('<player></player>')
        .attr('id',childId)
        .attr('data-uuid',valueUnwrapped)
        .insertAfter($(element))

        $.each($(element).data(),function (key, value) { 
          if (key !== 'bind' && key !== 'options'){
            var temp = value;            

            if (typeof(value) !== 'string'){
              // For example, data-options:
              //  data-options='{"width":"100%","height":"100%", "aspectratio":"4:3", "displaytitle":"false","displaydescription":"false"}'
              temp = {}
              $.each(value,function(key1,value1){
                temp[key1] = value1; 
              })
            }

            player.attr(`data-${key}`,temp);

            console.log(`x) ${key} : ${value}`); 
            console.log(value)
          }
        })

        CameraTag.setup();
    }
};

此绑定还会复制原始元素的data-...属性。

然后,它可以像这样使用:

<player id="DemoPlayer" 
    data-bind="uuid: uuid"
    data-options='{"width":"100%","height":"100%", "aspectratio":"4:3", "displaytitle":"false","displaydescription":"false"}'
    data-signature="@signature"
    data-signature-expiration="@expiration">
</player>

ViewModel:

function ViewModel() {
    var self = this;
    self.uuid = ko.observable('v-1237c41f-9038-44b7-b4cc-8cb1f13f6f76')
}

ko.applyBindings(new ViewModel());

这是一个fiddle。在编辑框中,您可以更改密钥。此示例的关键位于此网址:player example