2017-06-22 22 views
1
    @{ Html.RenderPartial(MVC.Shared.Views.Partials.CameraTagVideoPlayer, new CameraTagVideoPlayerViewModel("applicationVideo", "xxx")); } 

"xxx"を特定のノックアウトデータバインドに置き換えたいとします。例えば、htmlの文字列を置き換える方法renderPartial?

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

は私に人のapplicationKeyを与える

。私はこのキーをRenderPartialの中に入れてビデオを再生したいと思います。これを行う方法はありますか?

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

'MVC.Shared.Views.Partials.CameraTagVideoPlayer'の部分ビューを表示できますか? –

+0

@JoseLuisちょうど追加されました!それは役に立ちますか? – Dukakus17

答えて

1

このビューがrederedされたとき、あなたは、バインディングの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です。編集ボックスで、キーを変更することができます。この例の鍵はこのURLにあります:player example

+0

@ user7677413私は答えを更新しました。あなたがオーディオを再生するために使用しているライブラリは、ロード時に ''タグを見つける仕事をしています。このため、ノックアウトが値を与えるとき、カメラタグはまだこの ' 'をスキャンしたので、カメラタグはそれを見ません。 Knockoutが処理するたびに新しい ''を作成するカスタムバインディングを追加します。私は演奏するためにフィドルを加える。お役に立てれば。 –

+1

あなたは私のヒーローです!ありがとう! – Dukakus17

関連する問題