htmlknockout.jsrenderpartial

how to replace a string in html renderPartial?


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

I want to replace "xxx" with a particular knockout data-bind.

For example,

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

gives me a applicationKey of a person. I want to put this key inside that RenderPartial to play a video. Is there a way to do this?

EDIT:

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>

Solution

  • If knockout is enabled when this view is redered, you could use the attr binding (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>
    

    Hope this helps.

    Update 1 This question is about Camera Tag (https://cameratag.com/). This javascript library finds <player> tags with an onload event. You can add new tags, but can't modify the existing ones.

    You can create a custom binding that, on each change, creates a new <player> tag (and of course, delete the old ones):

    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();
        }
    };
    

    This binding also copy the data-... attributes of the original element.

    Then, it can be used like this:

    <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>
    

    And the ViewModel:

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

    Here is a fiddle to play with. In the edit box you can change the key. The key of this example is found in this url: player example.